<template>
  <BasicModal v-bind="$attrs" destroyOnClose :title="title" :width="640" @register="registerModal" @ok="handleSubmit">
    <div class="form-container max-w-screen-lg py-4">
      <a-form ref="formRef" :model="formModel" :rules="validatorRules" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
        <a-form-item label="父类">
          <nTreeSelect 
            v-model:value="formModel.parentId"
            :placeholder="isUpdate.value ? '请选择父类' : '请选择分类'"
            :disabled="action == 'view' || action == 'edit'"
          />
        </a-form-item>
        <a-form-item label="分类名称" v-bind="validateInfos.themeName">
          <a-input v-model:value="formModel.themeName" placeholder="请输入分类名称" />
        </a-form-item>
        <a-form-item label="图标" v-bind="validateInfos.themeIcon">
          <JImageUpload v-model:value="formModel.themeIcon" />
        </a-form-item>
        <a-form-item label="路径" v-bind="validateInfos.themePath">
          <a-input v-model:value="formModel.themePath" placeholder="请输入路径" />
        </a-form-item>
        <a-form-item label="排序权重">
          <a-input-number v-model:value="formModel.sortOrder" placeholder="请输入排序权重" />
        </a-form-item>
      </a-form>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { ref, computed, reactive, unref } from 'vue';
  import { Form, Modal } from 'ant-design-vue';
  import { useDebounceFn } from '@vueuse/core';
  import { BasicModal, useModalInner } from '/src/components/Modal';
  import { BasicForm, useForm } from '/src/components/Form';
  import { formSchema } from '../JhTheme.data';
  import { saveOrUpdate } from '../JhTheme.api';
  import JImageUpload from '/@/components/Form/src/jeecg/components/JImageUpload.vue';

  // Emits声明
  const emit = defineEmits(['register', 'success']);
  const isUpdate = ref(true);
  const isDetail = ref(false);
  const formRef = ref();
  const action = ref('add');
  const treeData = ref([]);
  let formModel = ref({
    id: null,
    parentId: 0,
    themeName: '',
    themeCode: '',
    themeIcon: '',
    themePath: '',
    sortOrder: 0,
  });
  const validatorRules = reactive({
    themeName: [
      { required: true, message: '请输入景点分类' },
      { min: 2, max: 20, message: '景点名称长度在2到20个字符之间' },
    ],
    themeIcon: [{ required: true, message: '请上传图标' }],
    themePath: [{ required: true, message: '请输入路径' }],
    // 其他字段的验证规则...
  });
  //设置标题
  const title = computed(() => (!unref(isUpdate) ? '新增' : !unref(isDetail) ? '详情' : '编辑'));

  //表单配置
  const useForm = Form.useForm;
  const { resetFields, validate, validateInfos, clearValidate } = useForm(formModel.value, validatorRules, { immediate: false });

  //表单赋值
  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    await resetFields();
    setModalProps({ confirmLoading: false, showCancelBtn: !!data?.showFooter, showOkBtn: !!data?.showFooter });
    isUpdate.value = !!data?.isUpdate;
    isDetail.value = !!data?.showFooter;
    action.value = data?.action;
    if (unref(isUpdate)) {
      //表单赋值
      formModel.value = Object.assign(formModel.value, data.record);
      formModel.value.parentId = formModel.value.parentId || 0;
    }
    // 隐藏底部时禁用整个表单
    //setProps({ disabled: !data?.showFooter })
  });

  const debouncedFn = useDebounceFn(async () => {
    formRef.value.validate().then(async () => {
      try {
        setModalProps({ confirmLoading: true });
        if(formModel.value.parentId == 0){
          delete formModel.value.parentId;
        }
        //提交表单
        await saveOrUpdate(formModel.value, isUpdate.value);
        //关闭弹窗
        closeModal();
        //刷新列表
        emit('success');
      } finally {
        setModalProps({ confirmLoading: false });
      }
    });
  }, 1000);

  //表单提交事件
  async function handleSubmit() {
    await validate();
    setModalProps({ confirmLoading: true });
    debouncedFn();
  }
</script>

<style lang="less" scoped>
  /** 时间和数字输入框样式 */
  :deep(.ant-input-number) {
    width: 100%;
  }

  :deep(.ant-calendar-picker) {
    width: 100%;
  }
</style>
